JavaScript Best Practices — More About Arrays

JavaScript is a very forgiving language. It’s easy to write code that runs but has mistakes in it.

In this article, we’ll look at the best ways to manipulate array entries with JavaScript.

Use Array.from Instead of The Spread Operator for Mapping over Iterables

The Array.from method lets us convert an iterable object into an array. Also, it lets us map the iterable object’s values without creating an intermediate array.

Therefore, we should use it instead of the spread operator and map together to map an iterable object to a new array.

For instance, we can use it as follows:

const obj = {
  0: 1,
  1: 2,
  length: 2
}
const arr = Array.from(obj, (a) => a * 2);

In the code above, we have an object obj which has the entries with integer keys and the length property, so we can convert it to an array with the Array.from method.

We can map the entries by passing in a callback to map the entries into something that we want as the 2nd argument.

This way, we don’t have to use the spread operator to convert an iterable object into an array and then call map on it as follows:

function* foo() {
  yield 1;
  yield 2;
}
const arr = [...foo()].map((a) => a * 2);

In the code above, we defined a generator function and then called it to convert the returned entries into an array. Then we called map to map it into the entries that we want.

This isn’t as good because we have to create an array and then call map on it.

Use Return Statements in Array Method Callbacks Except for Single Line Arrow Functions

We should always return something on our array method callbacks except when we define a callback for forEach or in single line arrow functions, which returns things implicitly.

For instance, we should write the following to call map with a callback that returns something:

const arr = [1, 2].map((a) => a * 2);

In the code above, our callback is (a) => a * 2 which returns a * 2 .

Also, we can write that as follows:

const arr = [1, 2].map((a) => {
  return a * 2;
});

This way, the return statement is clearer.

We shouldn’t write something like the following:

const arr = [];
[1, 2].map((a) => {
  arr.push(a * 2);
});

In the code above, the callback didn’t return anything. Instead, it just calls push on the arr array which is outside the callback. It creates a side effect and doesn’t return anything, which is both bad.

We should just make it return something in our callback like the map method expects us to.

Use Line Breaks After Open and Before Close Array Brackets If an Array Has Multiple Lines

If an array entry has multiple lines, then we should add a line break after the opening bracket and before the closing bracket to separate the entries from the brackets.

This improves the readability of our array entries since we know where they start and end.

For instance, we can write the following code to do that:

const arr = [
  {
    a: 1
  },
  {
    b: 2
  }
]

In the code above, we have an array with objects and we have line breaks before the first and after the last entry of the array to make the entries easier to read.

If we can write everything in one line, then we don’t need line breaks in our array code to separate the entries and the brackets.

For instance, we can write the following:

const arr = [1, 2, 3];

In the code above, we just kept everything in one line since each entry is so short that we can write the whole array in one line.

Conclusion

The Array.from method is good for converting iterable and non-iterable array-like objects into arrays and mapping each entry to new values at the same time.

This is good because we don’t have to create an intermediate array and the calling map on it like we have to do with the spread operator.

If our array entries are long, then we should write out all of them in their own line.